<template>
    <div class="paddB60">
        <div class="marLR20 marT20">
            <el-row :gutter="40">
                <el-col :span="12">
                    <h3 class="setH3">通知类</h3>
                    
                    <div class="marB20">
                        <div style="display:inline-block;" class="marT10">
                            <el-input v-model.trim="keyword" class="inputTxtWrapper" placeholder="根据标题或文件编号搜索" maxlength='20'></el-input>
                        </div>
                        <button class="operatBtn marR5 marT10" @click.stop="handleChange">搜索</button>
                    </div>
                    
                    <!-- 通知类公告内容 -->
                    <div v-if = "noticeList.length > 0">
                        <dl v-for = "(item,index) of noticeList" :key = "item.id" :index = "index" class="marT20">
                            <dt class="noticeItemNav"  @click.stop = "viewNoticeFile(item.notice_file_path)">
                                <el-row>
                                    <el-col :span="24">
                                        {{item.notice_title}}
                                    </el-col>
                                </el-row>
                            </dt>
                            <dd>
                                <div class="otherInfo ellipsis" 
                                        :title="'文件编号:' + item.notice_file_num + ',新建时间:' + item.notice_add_time + ',发布时间:' + item.lastNoticeAuditTime + ',新建人:' + item.noticeReleaseUserName + ',状态:已发布'">
                                    文件编号:{{item.notice_file_num}},
                                    <el-popover
                                        placement="top-start"
                                        width="200"
                                        trigger="hover">
                                        <!-- 新增时间 -->
                                        <div>
                                            <p class="ellipsis" :title="item.notice_add_time">新增时间:{{item.notice_add_time}}</p>
                                        </div> 
                                        <!-- 审核人-->
                                        <div>
                                            <p class="ellipsis" :title = "item.auditUserNames">审核人:{{item.auditUserNames}}</p>
                                        </div>
                                        <span slot="reference">详细信息,</span>
                                    </el-popover>
                                    <el-popover
                                        placement="top-start"
                                        width="300"
                                        v-model = "item.isPoperShow"
                                        trigger="manual">
                                        <!-- 发布范围 -->
                                        <div>
                                            <div  v-if = "item.notice_release_range === '2'">
                                                <p class="ellipsis" title="人员">人员:{{currUserNames.length === 0 ? '/' : ''}}</p>
                                                <p v-for="item of currUserNames" :key = "item" style="text-indent:2em;">{{item}}</p>
                                            </div>
                                            <div class="ellipsis" v-else>发布范围:全公司</div>
                                        </div>
                                        <span slot="reference">
                                            <span  @mouseenter.stop = "previewRange(item.id,item.notice_release_range,index,'通知')"  @mouseleave.stop = "handleMouseOut(index,'通知')">发布范围,</span>
                                        </span>
                                    </el-popover>
                                    发布时间:{{item.lastNoticeAuditTime}},
                                    新建人:{{item.noticeReleaseUserName}},
                                    状态:已发布
                                </div>
                            </dd>
                        </dl>
                    </div>
                    <div v-else class="tipNoData">暂无数据</div>

                </el-col>
                

                <el-col :span="12">
                    <h3 class="setH3">制度类</h3>

                    <div class="marB20">
                        <div style="display:inline-block;" class="marT10">
                            <el-input v-model.trim="sysKeyWord" class="inputTxtWrapper" placeholder="根据标题搜索" maxlength='20'></el-input>
                        </div>
                        
                        <button class="operatBtn marR5 marT10" @click.stop="sysHandleChange">搜索</button>
                    </div>

                    
                    <!-- 制度类公告内容 -->
                    <div v-if = "systemNoticeList.length > 0">
                        <dl v-for = "(item,index) of systemNoticeList" :key = "item.id" :index = "index" class="marT20">
                            <dt class="noticeItemNav"  @click.stop = "viewNoticeFile(item.notice_file_path)">
                                <el-row>
                                    <el-col :span="24">
                                        {{item.notice_title}}
                                    </el-col>
                                </el-row>
                            </dt>
                            <dd>
                                <div class="otherInfo ellipsis" 
                                        :title="'文件编号:' + item.notice_file_num + ',新建时间:' + item.notice_add_time + ',发布时间:' + item.lastNoticeAuditTime + ',新建人:' + item.noticeReleaseUserName + ',状态:已发布'">
                                    文件编号:{{item.notice_file_num}},
                                    <el-popover
                                        placement="top-start"
                                        width="200"
                                        trigger="hover">
                                        <!-- 新增时间 -->
                                        <div>
                                            <p class="ellipsis" :title="item.notice_add_time">新增时间:{{item.notice_add_time}}</p>
                                        </div> 
                                        <!-- 发布范围 -->
                                        <div>
                                            <p class="ellipsis"  v-if="item.notice_release_range === '2'" :title="item.read_only_departs_names">发布范围:{{item.read_only_departs_names}}</p>
                                            <p class="ellipsis" v-else title="全公司">发布范围:全公司</p>
                                        </div>
                                        <!-- 审核人-->
                                        <div>
                                            <p class="ellipsis" :title = "item.auditUserNames">审核人:{{item.auditUserNames}}</p>
                                        </div>
                                        <span slot="reference">详细信息,</span>
                                    </el-popover>
                                    <el-popover
                                        placement="top-start"
                                        width="300"
                                        v-model = "item.isPoperShow"
                                        trigger="manual">
                                        <!-- 发布范围 -->
                                        <div>
                                            <div  v-if = "item.notice_release_range === '2'">
                                                <p class="ellipsis" title="人员">人员:{{currUserNames.length === 0 ? '/' : ''}}</p>
                                                <p v-for="item of currUserNames" :key = "item" style="text-indent:2em;">{{item}}</p>
                                            </div>
                                            <div class="ellipsis" v-else>发布范围:全公司</div>
                                        </div>
                                        <span slot="reference">
                                            <span  @mouseenter.stop = "previewRange(item.id,item.notice_release_range,index,'制度')"  @mouseleave.stop = "handleMouseOut(index,'制度')">发布范围,</span>
                                        </span>
                                    </el-popover>
                                    发布时间:{{item.lastNoticeAuditTime}},
                                    新建人:{{item.noticeReleaseUserName}},
                                    状态:已发布
                                </div>
                            </dd>
                        </dl>
                    </div>
                    <div v-else class="tipNoData">暂无数据</div>

                </el-col>
            </el-row>
        </div>

        <!-- 分页 -->
        <div class="leftPageWripper" v-if="noticeList.length > 0">
            <el-pagination
            @size-change="handleChange"
            @current-change="handleChange"
            :current-page.sync="serverPage.currPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="serverPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="serverPage.totalSize">
            </el-pagination>
        </div>

        <!-- 分页 -->
        <div class="rightPageWripper" v-if="systemNoticeList.length > 0">
            <el-pagination
            @size-change="sysHandleChange"
            @current-change="sysHandleChange"
            :current-page.sync="sysServerPage.currPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="sysServerPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="sysServerPage.totalSize">
            </el-pagination>
        </div>
        

    </div>
</template>

<script>
import http from '@/assets/js/http'
import _g from '@/assets/js/global'

import { mapGetters } from 'vuex'


export default {
    data(){
        return{

            noticeList : [],//  通知类公告列表
            systemNoticeList : [],//  制度类公告列表

            currUserNames : [],//   当前公告记录的发布人员范围


            //  通知类公告分页
            serverPage:{                                                                                              //  后台分页                                    
                pageSize:10,                 //  每页显示10个
                totalSize:0,                 //  总记录数
                currPage:1,                    //  当前页码 
            },  
            keyword : '',    //  模糊搜索关键词
            noticeAudit : 0,    //  审核结果搜索

            //  制度类公告分页
            sysServerPage:{                                                                                              //  后台分页                                    
                pageSize:10,                 //  每页显示10个
                totalSize:0,                 //  总记录数
                currPage:1,                    //  当前页码 
            },  
            sysKeyWord : '',    //  模糊搜索关键词
        }
    },
    created() {
        this.getAllPagingReleasedNotice()
    },
    computed: {
        ...mapGetters([                                                                         //  用户权限
                'getRoles',
        ])
    },
    methods: {
        /* 鼠标离开隐藏公告发布范围 */
        handleMouseOut(index,str){
            this.currUserNames = []

            if(str === '通知'){
                this.noticeList[index].isPoperShow = false
            }else if(str === '制度'){
                this.systemNoticeList[index].isPoperShow = false
            }
        },

        /*鼠标悬浮展示公告发布范围  */
        previewRange(noticeId,noticeReleaseRange,index,str){
            const that = this
            let currUserNames = []

            let arr = []
            if(noticeReleaseRange === '1'){//   如果发布范围为全公司
                if(str === '通知'){
                    that.noticeList[index].isPoperShow = true
                }else if(str === '制度'){
                    that.systemNoticeList[index].isPoperShow = true
                }
               
            }else if(noticeReleaseRange === '2'){//..如果发布范围为组织架构
                if(str === '通知'){
                    arr = that.noticeList.filter(item => item.isPoperShow === true)
                }else if(str === '制度'){
                    arr = that.systemNoticeList.filter(item => item.isPoperShow === true)
                }
       
                if(arr.length > 0){//   确保每次只有一次请求，防止重复请求
                    return
                }

                // 请求发布范围数据
                _g.showLoading('加载中')
                that.apiPost('admin/notice/queryNoticeReadOrganiNams',{noticeId}).then(res => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if(res.data.isSuccess === 0){
                        
                        if(res.data.result.length <= 0){
                            _g.toastMsg('warning','暂无数据')
                        }else{
                            for(let item of res.data.result.users){
                                currUserNames.push(item.user_name)
                            }
                            that.currUserNames = currUserNames
                            if(str === '通知'){
                                that.noticeList[index].isPoperShow = true
                            }else if(str === '制度'){
                                that.systemNoticeList[index].isPoperShow = true
                            }
                        }
                    }else if(res.data.isSuccess === 1){
                        _g.toastMsg('error',res.message)
                    }
                }).catch((error) => {})
            }
        },

        /* 查看公告附件 */
        viewNoticeFile(noticeFilePath){
            window.open(noticeFilePath)
        },
        /* 通知类公告分页 */
        handleChange(){
            this.getAllPagingReleasedNotice(1)
        },
        /* 制度类公告分页 */
        sysHandleChange(){
            this.getAllPagingReleasedNotice(2)
        },
        /* 分页模糊查询当前登录用户的已经发布的公告 */
        getAllPagingReleasedNotice(noticeType){
            const that = this
            let noticeList = []
            let data = {}
            if(noticeType === undefined || noticeType === 1){// 如果为初始或通知类
                data.pageSize = that.serverPage.pageSize
                data.currPage = that.serverPage.currPage
                data.keyword = that.keyword
                data.noticeAuditResult = that.noticeAudit
                data.noticeType = noticeType
            }else if(noticeType === 2){//   如果为制度类
                data.pageSize = that.sysServerPage.pageSize
                data.currPage = that.sysServerPage.currPage
                data.keyword = that.sysKeyWord
                data.noticeAuditResult = that.sysNoticeAudit
                data.noticeType = noticeType
            }
             _g.showLoading('加载中')
            that.apiPost('admin/notice/getAllPagingReleasedNotice',data).then((res) => {
                _g.showLoading().close()
                if(typeof res === 'string'){
                    res = JSON.parse(res)
                }
                if (res.code != 200) {
                    that.handleError(res)
                } else {
                    if(res.data.isSuccess === 0){             //  成功
                        if(res.data.noticeList !== null){
                            for(let item of res.data.noticeList.data){
                                 item['isPoperShow'] = false
                            }
                            that.noticeList = res.data.noticeList.data
                            that.serverPage.totalSize = res.data.noticeList.total
                         }   

                         if(res.data.systemNoticeList !== null){
                            for(let item of res.data.systemNoticeList.data){
                                item['isPoperShow'] = false
                            }
                            that.systemNoticeList = res.data.systemNoticeList.data
                            that.sysServerPage.totalSize = res.data.sysNoticeTotal
                         } 
                    }else{
                        _g.toastMsg("error", res.message)
                    }
                }
            })
        },
    },
    mixins: [http]
}
</script>

<style lang="less" scoped>
dl{
    cursor: pointer;
}
.noticeItemNav{
    color: black;
    font-size: 14px;
    line-height: 40px;
}
.otherInfo{
    font-size: 12px;
    color: #909399;
}
dl:hover .noticeItemNav,
dl:hover .time{
    color: #ef8200 !important;
}

dl::after{
    content: "";
    display:block;
    border-bottom : 1px dotted #ccc;
    margin-top:20px;
}

.time{
    text-align: right;
    color: #909399;
}
</style>


